<template>
	<div style="display: inline-block">
		<div @click="popClick">
			<el-tag v-for="(item,index) in value" :key="item.code" @click.prevent.stop="popClick"
			        :closable="true" :close-transition="true"
			        @close.prevent.stop="removeTagClose(item.code,$event)" style="margin-right:18px;">
				<template v-if="minNumber>0 && value.length>minNumber">{{index + 1}}.</template>
				{{item.name}}
			</el-tag>

			<slot name="button" v-if="!value.length">
				<el-button>选择</el-button>
			</slot>
		</div>

		<el-dialog ref="dialog" title="选择 分类" :visible.sync="popOpen" :center="true" width="80%" style="padding:20px;">
			<div style="justify-content: flex-end;margin-bottom: 10px;display:flex;">
				<el-button type="primary" @click="handleClick()">确定</el-button>
				<el-button @click="popOpen=false">取消</el-button>
			</div>
			<kv label="已选择" style="background-color: #e6a23c;color:white;">
				<div>
					<el-tag v-for="(item,index) in items" :key="item.code" @click.prevent.stop="popClick"
					        :closable="true" :close-transition="true"
					        @close.prevent.stop="removeTagClose(item.code,$event)" style="margin-right:18px;">
						<template v-if="minNumber>0 && items.length>minNumber">{{index + 1}}.</template>
						{{item.name}}
					</el-tag>
				</div>
			</kv>
			<kv label="大类">
				<el-radio-group v-model="category1" @change="changed1()">
					<el-radio-button :label="item.code" v-for="item in categories1" :key="item.code">{{item.name}}
					</el-radio-button>
				</el-radio-group>
			</kv>
			<kv label="小类">
				<el-radio-group v-model="category2" size="small" @change="changed2()">
					<el-radio-button :label="item.code" v-for="item in categories2" :key="item.code">{{item.name}}
					</el-radio-button>
				</el-radio-group>
			</kv>
		</el-dialog>
	</div>
</template>
<script>

	export default {
		name: "ref-categories",
		props: {
			minNumber: {type: Number, default: 3},
			readOnly: {type: Boolean, default: false},
			open: {type: Boolean, default: false},
			value: {
				type: Array, default: function () {
					return []
				}
			}
		},
		data() {
			return {
				categories1: [],
				categories2: [],
				category1: "",
				category2: "",
				items: this.value.map(it => Object.assign({}, it)),
				popOpen: this.open
			}
		},
		watch: {
			value: {
				deep: true,
				handler(value) {
					if (jv.refDataEquals(value, this.items)) return;

					if (value instanceof Array) {
						this.items = value.map(it => Object.assign({}, it));
					} else {
						this.items = [];
					}
				}
			}
		},
		mounted() {
			this.loadCategory1();
		},
		methods: {
			loadCategory1() {
				this.$http.post("/info/product/rootCategoryList").then(res => {
					var list = res.data.data;
					this.categories1 = list;
				});
			},
			changed1() {
				this.$http.post("/info/product/findCategoies2", {code: this.category1}).then(res => {
					var list = res.data.data;
					this.categories2 = list;
				});
			},
			changed2() {
				if (this.items.some(it => it.code == this.category2)) {
					return;
				}
				var item = this.categories2.last(it => it.code == this.category2);
				this.items.push(item);
			},
			removeTagClose(code) {
				var index = this.items.findIndex(it => it.code == code);
				if (index < 0) return;

				this.items.splice(index, 1);
				return false;
			},
			popClick() {
				if (this.readOnly) {
					return;
				}
				this.popOpen = true;
			},
			handleClick() {
				this.popOpen = false;

				// //比较是否相同.
				// if (jv.refDataEquals(this.oriValue, this.dbRefValue)) return;


				this.$emit('input', this.items.map(it => Object.assign({}, it)));
				var changed = {added: [], deleted: []};

				//公共Id部分
				var commIds = this.items.map(it => it.code).intersect(this.value.map(it => it.code));

				//两部分。 add , delete
				this.items.filter(newValue => {
					if (commIds.some(code => code == newValue.code) == false) {
						changed.added.push(newValue);
					}
				});

				this.value.filter(oldValue => {
					if (commIds.some(code => code == oldValue.code) == false) {
						changed.deleted.push(oldValue);
					}
				});

				//比较是否相同.
				if (!changed.added.length && !changed.deleted.length) return;
				this.$emit("changed", changed);
			}
		}
	}
</script>



